<template>
  <div class="index">
    <div class="left-menu">
      <!-- <div class="left-head">
        <img src="../assets/refresh.png" @click="getDepartmentList" />
        <span>刷新</span>
      </div>-->
      <el-menu
        :default-active="activeIndex"
        class="el-menu-vertical-demo"
        v-for="item in menuList"
        :key="item.departmrntState"
      >
        <el-menu-item
          :index="item.departmentId.toString()"
          :disabled="item.state"
          @click="menuClick(item.departmentId.toString())"
        >
          <span slot="title">{{ item.departmentName }}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <el-row style="width:10px"></el-row>
    <div class="right">
      <el-row style="width:100;height:10px"></el-row>
      <div class="right-box">
        <div class="dataShow" v-drag>
          <div class="data">
            <div class="dataTitle">今日入科</div>
            <div class="dataNumber">{{ totalData.inDepartmentTimeToday }}</div>
          </div>
          <div class="data">
            <div class="dataTitle">昨日入科</div>
            <div class="dataNumber">{{ totalData.inDepartmentTimeYesterday }}</div>
          </div>
          <div class="data">
            <div class="dataTitle">今日出科</div>
            <div class="dataNumber">{{ totalData.leaveDepartmentTimeToday }}</div>
          </div>
          <div class="data">
            <div class="dataTitle">昨日出科</div>
            <div class="dataNumber">{{ totalData.leaveDepartmentTimeYesterday }}</div>
          </div>
          <div class="data">
            <div class="dataTitle">在科人数</div>
            <div class="dataNumber">{{ totalData.inSickBedNumber }}</div>
          </div>
          <div class="data">
            <div class="dataTitle">病床剩余</div>
            <div class="dataNumber">{{ totalData.sickBedNotInUse }}</div>
          </div>
          <div class="data">
            <div class="dataTitle">病床总数</div>
            <div class="dataNumber">{{ totalData.sickBedTotal }}</div>
          </div>
          <div class="data">
            <div class="dataTitle">损坏报备</div>
            <div class="dataNumber">{{ totalData.sickBedDamage }}</div>
          </div>
        </div>
      </div>
      <!-- <el-row style="width:100;height:10px"></el-row> -->
      <!-- <div class="right-box">
        <div class="dataShow">
          <div class="data">
            <div class="dataTitle">损坏报备</div>
            <div class="dataNumber">100</div>
          </div>
          <div class="data">
            <div class="dataTitle">今日订餐</div>
            <div class="dataNumber">100</div>
          </div>
          <div class="data">
            <div class="dataTitle">今日餐饮评价</div>
            <div class="dataNumber">100</div>
          </div>
          <div class="data">
            <div class="dataTitle">今日出科评价</div>
            <div class="dataNumber">100</div>
          </div>
          <div class="data">
            <div class="dataTitle">提前出科申请</div>
            <div class="dataNumber">100</div>
          </div>
        </div>
      </div>-->
      <el-row style="width:100;height:10px"></el-row>
      <div class="right-charts">
        <div class="first-row">
          <div id="myCircle1" :style="{ width: '400px', height: '300px' }" v-drag></div>
          <!-- <div class="chart-show">
            <el-progress
              type="circle"
              :percentage="20"
              :width="200"
              :height="200"
            ></el-progress>
            <div class="chart-title">病床剩余</div>
          </div>-->
          <div id="myCircle2" :style="{ width: '400px', height: '300px' }" v-drag></div>
          <div id="myLine2" :style="{ width: '800px', height: '300px' }" v-drag></div>
        </div>
        <el-row style="width:100;height:0px"></el-row>
        <div id="myChart" :style="{ width: '100%', height: '400px' }" v-drag></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "index",
  data() {
    return {
      activeIndex: "1",
      menuList: [],
      totalData: {},
      sickBedsInAll: [],
      sickBedsInDepartment: [],
      times: [],
      ins: [],
      outs: [],
      inOuts: []
      // series1: [5, 20, 36, 10, 10, 20],
      // series2: [7, 40, 36, 24, 19, 30]
    };
  },

  created() {
    this.getDepartmentList();
    this.menuClick(1);
  },
  mounted() {
    this.drawLine();
    this.drawCircle1();
    this.drawCircle2();
    this.drawLine2();
  },
  methods: {
    getDepartmentList() {
      // console.log(111);
      this.$axios.get("/api/CjwDepartment/GetDepartmentList").then(res => {
        this.menuList = res.data;
      });
      console.log(this.menuList);
    },

    menuClick(id) {
      this.activeIndex = id;
      console.log(id);
      this.$axios
        .get("/api/CjwStatistics/GetStatistics?departmentId=" + id)
        .then(res => {
          console.log(res);
          this.totalData = res.data;
          this.sickBedsInAll = res.data.sickBedsInAll;
          this.sickBedsInDepartment = res.data.sickBedsInDepartment;
          this.times = res.data.times;
          this.ins = res.data.ins;
          this.outs = res.data.outs;
          this.inOuts = res.data.inOuts;
          this.drawCircle1();
          this.drawCircle2();
          this.drawLine();
          this.drawLine2();
        });
      // this.$emit("admin", name);
      // let time =
    },
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart"));
      // 绘制图表
      myChart.setOption({
        // title: { text: "在Vue中使用echarts" },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow"
          }
        },
        xAxis: {
          data: this.times
        },
        yAxis: {},
        series: [
          {
            name: "入科",
            type: "bar",
            data: this.ins
          },
          {
            name: "出科",
            type: "bar",
            data: this.outs
          }
        ]
      });
    },
    drawCircle1() {
      let myCircle1 = this.$echarts.init(document.getElementById("myCircle1"));
      myCircle1.setOption({
        tooltip: {
          trigger: "item"
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "病床数量",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2
            },
            label: {
              show: false,
              position: "center"
            },
            emphasis: {
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold"
              }
            },
            labelLine: {
              show: false
            },
            data: this.sickBedsInAll
          }
        ]
      });
    },
    drawCircle2() {
      let myCircle2 = this.$echarts.init(document.getElementById("myCircle2"));
      myCircle2.setOption({
        legend: {
          orient: "vertical",
          left: "left"
        },
        grid: {
          height: "10px",
          width: "10px"
        },
        tooltip: {
          trigger: "item"
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: "病床状态",
            type: "pie",
            radius: [25, 125],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8
            },
            data: this.sickBedsInDepartment
          }
        ]
      });
    },
    drawLine2() {
      // 基于准备好的dom，初始化echarts实例
      let myLine2 = this.$echarts.init(document.getElementById("myLine2"));
      // 绘制图表
      myLine2.setOption({
        grid: {
          width: "600px"
        },
        xAxis: {
          type: "category",
          data: this.times
        },
        yAxis: {
          type: "value"
        },
        title: {
          text: "出入科比(当天的出科人数/当天的入科人数)",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: function(datas) {
            return datas.value.toFixed(2);
          }
        },
        series: [
          {
            data: this.inOuts,
            type: "line",
            smooth: true
          }
        ]
      });
    }
  }
};
</script>

<style scoped>
.index {
  display: flex;
}

.left-menu {
  width: 250px;
}

.left-menu .left-head {
  display: flex;
  align-items: center;
}

.left-menu .left-head img {
  width: 32px;
  height: 32px;
}

.right {
  flex: 1;
  min-height: 600px;
}

.right .dataShow {
  width: 100%;
  background: linear-gradient(to right, #4381f8, #33abfc);
  border-radius: 5px;
  height: 150px;
  display: flex;
  justify-content: space-around;
}

.data {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.dataTitle {
  font-size: 30px;
  font-weight: 600;
  color: black;
}

.dataNumber {
  font-size: 25px;
}

.first-row {
  display: flex;
  justify-content: space-around;
}

.chart-show {
  width: 200px;
  position: relative;
}

.chart-title {
  position: absolute;
  left: 30%;
  color: #4f4f4f;
  font-size: 20px;
}

/* .bar {
  display: flex;
} */

.bar-title {
  color: #4f4f4f;
  font-size: 20px;
}

.second-row {
  display: flex;
}

.second-row-left {
  flex: 1;
}

.colcol {
  flex: 1;
}

.second-row-right {
  flex: 1;
}
</style>
